<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>D站</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link rel="icon" th:href="@{/pagesResource/img/icon.png}">
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/animate.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/bootstrap.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/iconfont.css}">
<!--    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/fontello.css}">-->
<!--    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/fontello-codes.css}">-->
<!--    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/thumbs-embedded.css}">-->
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/style.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/responsive.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/color.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/boostrapFileInputResources/css/fileinput.min.css}">

</head>
<body>
<div class="wrapper">
    <div th:include="main/simpleHeader :: header"></div>
</div>

<div class="container" style="max-width: 1170px;">
        <h3>文件上传</h3>
        <div class="row">
            <div class="col-sm-6">
                <section class="upload-detail">
                    <div class="vid_thumbainl tr">
                        <div class="video-file">
                            <i class="icon-graphics_05"></i>
                            <h3>选择一个mp4视频进行上传</h3>
                        </div>
                    </div>
                    <!--<h4>大小: 102.6 MB</h4>-->
                    <!--<h4>时长: 2:13min</h4>-->
                </section>
            </div>
            <div class="col-sm-6">
                <section class="upload-detail">
                    <div class="vid_thumbainl tr">
                        <div class="video-file">
                            <i class="icon-graphics_03"></i>
                            <h3>选择一张图片作为视频的封面</h3>
                        </div>
                    </div>
                    <!--<h4>大小: 102.6 MB</h4>-->
                    <!--<h4>时长: 2:13min</h4>-->
                </section>
            </div>
        </div>
    <div class="row">
        <div class="col-sm-6">
            <!-- 视频最大500M -->
            <input id="video-upload" type="file" accept="video/mp4" class=" form-control file" data-max-file-size="512000"  data-show-upload="false" data-show-preview="true" data-show-remove="false">
        </div>
        <div class="col-sm-6">
            <!-- 图片最大10M -->
            <input id="coverageImage-upload" type="file" accept="image/*" class=" form-control file" data-max-file-size="10240" data-show-upload="false" data-show-preview="true" data-show-remove="false">
        </div>
    </div>
</div>
<section class="vid-title-sec">
    <div class="container" style="max-width: 1170px;">
        <form>
            <!--视频标题-->
            <div class="vid-title">
                <h2 class="title-hd">视频信息标题</h2>
                <div class="form_field">
                    <input type="text" id="videoTitle" placeholder="在这填写 (99 字符以内)">
                </div>
            </div>
            <!--视频简介-->
            <div class="abt-vidz-pr">
                <h2 class="title-hd"> 简介 </h2>
                <div class="form_field">
                    <textarea id="description" placeholder="对你的视频进行一段简洁易懂的描述吧"></textarea>
                </div>
            </div>
            <!--类别-->
            <div class="cls-vidz">
                <div class="row">
                    <div class="col-lg-3 col-md-3 col-sm-6 col-12">
                        <div class="option">
                            <h2 class="title-hd">类别 </h2>
                            <div class="form_field">
                                <select  id="mainCategory" onchange="changeSecondaryCategory()">
                                    <option value="none">--请选择主类别--</option>
                                    <option th:each="classificationInfo : ${classificationInfoList}" th:value="${classificationInfo.classificationId}" th:if="${classificationInfo.preClassificationId eq 0}" th:text="${classificationInfo.classificationName}" th:id="'classification' + ${classificationInfo.classificationId}" th:name="'classification' + ${classificationInfo.classificationName}">

                                    </option>
                                </select>
                                <a href="#" title="" class="arw_vz">
                                    <svg width="24" height="26" viewBox="0 0 24 26" fill="none"
                                         xmlns="http://www.w3.org/2000/svg">
                                        <path fill-rule="evenodd" clip-rule="evenodd"
                                              d="M19.9394 7.51447L22.0607 9.63579L12 19.6964L1.93936 9.63579L4.06068 7.51447L12 15.4538L19.9394 7.51447Z"
                                              fill="#9494A0"></path>
                                    </svg>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-6 col-12">
                        <div class="option">
                            <div class="title-hd-2"></div>
                            <br>
                            <div class="form_field">
                                <select id="secondaryCategory">
                                    <!-- 默认为选项 -->
                                    <option value="none">--请选择子类别--</option>
                                </select>
                                <a href="#" title="" class="arw_vz">
                                    <svg width="24" height="26" viewBox="0 0 24 26" fill="none"
                                         xmlns="http://www.w3.org/2000/svg">
                                        <path fill-rule="evenodd" clip-rule="evenodd"
                                              d="M19.9394 7.51447L22.0607 9.63579L12 19.6964L1.93936 9.63579L4.06068 7.51447L12 15.4538L19.9394 7.51447Z"
                                              fill="#9494A0"></path>
                                    </svg>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-6 col-12"></div>
                    <div class="col-lg-3 col-md-3 col-sm-6 col-12"></div>
                </div>
            </div>
            <!--是否收费-->
            <div class="amazon-products">
                <h2 class="title-hd">是否收费</h2>
                <div class="prodcts-sec">
                    <ul class="catgss_list">
                        <li>
                            <div class="chekbox-lg" style="margin-bottom: 15px;">
                                <label onclick="hideChargeInput()">
                                    <input type="radio" name="subscription" value="free">
                                    <b class="checkmark" id="freeCheckBox"> </b>
                                    <span>免费</span>
                                </label>
                            </div>
                        </li>
                        <li>
                            <div class="chekbox-lg" style="margin-bottom: 15px;">
                                <label onclick="displayChargeInput()">
                                    <input type="radio" name="subscription" value="paid">
                                    <b class="checkmark"  id="notFreeCheckBox"> </b>
                                    <span >收费</span>
                                </label>
                            </div>
                        </li>
                    </ul>
                    <!--<input placeholder="请设置收费金额(元).." id="chargeInput" hidden="hidden"/>-->
                </div>
            </div>
            <!--标签-->
            <div class="category">
                <h2 class="title-hd">标签</h2>
                <div class="form_field" style="margin-bottom: 13px">
                    <input id="tag-show" type="text" placeholder="添加的标签在这里显示" readonly>
                </div>
                <div class="category-typ">
                    <ul id="tags" class="catgss_list">
                        <li th:each="labelInfo : ${labelInfoList}">
                            <div class="chekbox-lg">
                                <label>
                                    <!-- 设置label的名字为label+labelId -->
                                    <input type="checkbox" th:name="'label'+ ${labelInfo.tagId}" th:value="${labelInfo.tagName}" th:id="'label'+ ${labelInfo.tagId}">
                                    <b class="checkmark"></b>
                                    <span th:text="${labelInfo.tagName}"></span>
                                </label>
                            </div>
                        </li>
                    </ul>
                    <div class="clearfix"></div>
                    <div class="btn-sbmit">
                        <button type="button" id="submitVideoInfo">提交</button>
                    </div>
                </div>
            </div>
        </form>
    </div>

</section>
<script type="text/javascript" th:src="@{/boostrapFileInputResources/js/jquery-2.0.3.min.js}"></script>
<script type="text/javascript" th:src="@{/boostrapFileInputResources/js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/pagesResource/ckplayer/ckplayer.js}" charset="utf-8"
        data-name="ckplayer"></script>
<script type="text/javascript" th:src="@{/boostrapFileInputResources/js/fileinput.min.js}"></script>
<script type="text/javascript" th:src="@{/boostrapFileInputResources/js/fileinput_locale_zh.js}"></script>
<script th:src="@{/js/sweetAlert.js}"></script>
<script th:src="@{/pagesResource/js/script.js}"></script>
<script type="text/javascript">
    window.onload = function () {
        var tags = document.getElementById("tags");
        var tagList = tags.getElementsByTagName("input");
        var oText = document.getElementById("tag-show");
        document.getElementById("tags").onclick = function (e) {
            var src = e ? e.target : event.srcElement;
            if (src.tagName == "INPUT") {
                var values = [];
                for (var i = 0; i < tagList.length; i++) {
                    if (tagList[i].checked) {
                        values.push(tagList[i].value);
                    }
                }
                oText.value = values.join("|");
            }
        }
    }
</script>
<script type="text/javascript">

    //初始化 收费/不收费标签的内容
    $("#freeCheckBox").val("none");
    $("#notFreeCheckBox").val("none");

    function addNewTag() {
        var newTagElement = document.getElementById("new-tag");
        var newTag = newTagElement.value;
        if(newTag == ""){
            return;
        }
        var li = document.createElement("li");
        var div = document.createElement("div");
        var label = document.createElement("label");
        var input = document.createElement("input");
        var b = document.createElement("b");
        var span = document.createElement("span");
        var ul = document.getElementById("tags");
        div.setAttribute("class", "chekbox-lg");
        input.setAttribute("type", "checkbox");
        input.setAttribute("value", newTag);
        b.setAttribute("class", "checkmark");
        span.innerHTML = newTag;
        label.appendChild(input);
        label.appendChild(b);
        label.appendChild(span);
        div.appendChild(label);
        li.appendChild(div);
        ul.insertBefore(li, ul.childNodes[ul.childNodes.length - 2]);
        newTagElement.value = "";
    }

    /**
     * 主类别和子类别联动
     */
    function changeSecondaryCategory() {
        //获取选中的主类别的value
        var mValue = $("#mainCategory").val();
        if(mValue === "none") { //则子类别也转为none
            $("#secondaryCategory").html("<option value='none'>--请选择子类别--</option>");
        } else {    //根据ajax请求动态更新子类别
           $.ajax(
               {
                   async: false,
                   data:{
                       "parentId":mValue
                   },
                   method:"POST",
                   url:"/video/getClassificationByParentId",
                   cache: true,
                   success: function (res) {
                       $("#secondaryCategory").html("");
                       if(res["res"] == "null") {
                           $("#secondaryCategory").html("<option value='none'>--无子类别--</option>");
                       } else {
                           var data = eval("(" + res["data"] + ")");    //转为JSON数组
                           var optionStr = "";
                           for(var i = 0; i < data.length; i++) {
                               optionStr += "<option value='"+ data[i]["classificationId"] + "'>"+ data[i]["classificationName"] +"</option>\n";
                           }
                           $("#secondaryCategory").html(optionStr);
                       }
                   },
                   error:function (res) {
                       swal("Error", "网络错误，请联系管理员！", "error");
                   }
               }
           );
        }
    }

    function displayChargeInput() { //收费
        // $("#chargeInput").attr("hidden", false);
        $("#freeCheckBox").val("none");
        $("#notFreeCheckBox").val("checked");
    }

    function hideChargeInput() {
        // $("#chargeInput").attr("hidden", true);
        $("#freeCheckBox").val("checked");
        $("#notFreeCheckBox").val("none");
    }

    /**
     * 定义去除前后空格的函数
     * @param str
     * @returns {void | string}
     */
    function trimBlank(str){
        if(str == null) {
            return "";
        }
        return str.replace(/(^\s+)|(^\s+$)/g,"")
    }
    
    $("#submitVideoInfo").click(
        function () {
            //1. 拿到输入的全部内容
            var videoUploadCont = $("#video-upload")[0].files[0];
            var coverageImageUploadCont = $("#coverageImage-upload")[0].files[0];
            var videoTitleCont = $("#videoTitle").val();
            var descriptionCont = $("#description").val();
            var mainCategoryCont = $("#mainCategory").val();
            var secondaryCategoryCont = $("#secondaryCategory").val();
            var freeCheckBoxCont = $("#freeCheckBox").val();
            var notFreeCheckBoxCont = $("#notFreeCheckBox").val();
            var tagShowCont = $("#tag-show").val();

            var formDate = new FormData();
            //2. 判断是否选择全内容
            if(videoUploadCont === undefined){
                swal("Warning", "请上传视频！", "warning");
                return ;
            } else if(coverageImageUploadCont === undefined){
                swal("Warning", "请上传封面！", "warning");
                return ;
            } else if(trimBlank(videoTitleCont) === "") {
                swal("Warning", "视频标题不能为空！", "warning");
                return ;
            } else if(trimBlank(descriptionCont) === "") {
                swal("Warning", "视频简介不能为空！", "warning");
                return ;
            } else if(mainCategoryCont === "none" || secondaryCategoryCont === "none") {
                swal("Warning", "视频类别不能为空！", "warning");
                return ;
            } else if(freeCheckBoxCont === "none" && notFreeCheckBoxCont === "none") {
                swal("Warning", "请选择是否收费！", "warning");
                return ;
            } else if(trimBlank(tagShowCont) === "") {
                swal("Warning", "请选择视频标签！", "warning");
                return ;
            }
            //3. 将视频信息保存到服务器
            formDate.append("videoFile",videoUploadCont);
            formDate.append("coverageFile",coverageImageUploadCont);
            formDate.append("videoTitle",videoTitleCont);
            formDate.append("description",descriptionCont);
            formDate.append("mainCategoryID",mainCategoryCont);
            formDate.append("secondaryCategoryID",secondaryCategoryCont);
            formDate.append("isFree",notFreeCheckBoxCont === "checked" ? false : true);
            formDate.append("labelList",tagShowCont);
            var binaryData = [];
            // 传入file
            binaryData.push(videoUploadCont);
            //获取视频或者音频时长
            var fileurl = URL.createObjectURL(new Blob(binaryData, {type: "application/zip"}));
            //经测试，发现audio也可获取视频的时长
            var audioElement = new Audio(fileurl);
            var duration;
            audioElement.addEventListener("loadedmetadata", function (_event) {
                duration = audioElement.duration;
                console.log("视频的时长为:",duration);//单位：秒
                formDate.append("videoTime",parseInt(duration));
                $.ajax(
                    {
                        async: false,
                        data:formDate,
                        method:"POST",
                        url:"/video/saveVideoInfo",
                        cache: false,
                        processData: false,
                        contentType: false,
                        success: function (res) {
                            if(res["res"] == "success") {
                                swal("上传成功!", {
                                    buttons: false,
                                    timer: 1000,
                                    icon: "success"
                                });
                                setTimeout(function(){window.location.href = "/user/userHomePage"; },1100);
                            } else {
                                swal("Error", "上传失败！", "error");
                            }
                        },
                        error:function (res) {
                            swal("Error", "网络错误，请联系管理员！", "error");
                        }
                    }
                );

            });
        }
    );

    /**
     * 个人主页
     * @param userId
     */
    function userMainPage(userId) {
        window.location.href = "/user/userMainPage?userId=" + userId;
    }
</script>

</body>
</html>